<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{app.name}">企业云盘项目</title>
    <script th:inline="javascript">
        $(function () {
            $("#gd-user-btn-id").click(function (event) {
                event.stopPropagation()
                $("#gd-user-info-id > ul").removeClass("hidden")
            })
            
            $("body").click(function () {
                $("#gd-user-info-id > ul").addClass("hidden")
            })
            
            $("ul#gd-sys-memu-id > li").click(function () {
                $("ul#gd-sys-memu-id > li").removeClass('active')
                $(this).addClass('active')
                $(".service-menu").removeClass('in')
                var forid = $(this).attr("forid")
                $("#" + forid).addClass("in")
            })

            $("ul#gd-sys-memu-id > li:first").click()

            $("ul.menu-level3 > li").click(function () {
                $("ul.menu-level3 > li").removeClass("focus")
                $(this).addClass("focus")
            })
        })
        //ready function
    </script>
    <style>
        body{
            display: flex;
            flex-direction: column;

        }

        body > header {
            display: flex;
            width: 100%;
            justify-content:space-between;
            padding: 10px;
            align-items: center;
            height: 100px;
        }

        body > header > img{
            height: 80px
        }

        body > header > nav{
            width: 150px;
            display: flex;
            justify-content: space-between;
            padding-right: 20px;
        }

        body > section{
            width: 100%;
            flex-grow: 1;
            display: flex;

        }

        body > section > nav{
            flex-basis: 130px;
            height: 100%;
        }

        body > section > iframe{
            flex-grow: 1;
            height: 100%;
            border-width: 0;
        }

        #gd-user-info-id{
            position: absolute;
            top: 33px;
            right: 90px;
            width: 160px;
            display: flex;
            flex-direction: column;
            align-items: start;
        }

        .menu-level3 > li{
            margin-left: 13px;
        }

        .fade {
            display: none;
        }

        .fade.in{
            display:block;
        }

        ul.menu-level3 > li.focus{
            background-color: #dfd;
        }

    </style>
</head>
<body>

<header>
    <img th:if="${session.lang} eq 'en'" th:src="@{/assets/images/logo_en.png}">
    <img th:unless="${session.lang} eq 'en'" th:src="@{/assets/images/logo_zh.png}">

    <nav>
        <a  th:href="@{/(lang=en)}" th:text="#{login.english}"></a>
        <a  th:href="@{/(lang=zh)}" th:text="#{login.chinese}"></a>
    </nav>

    <nav></nav>

    <nav id="gd-user-info-id">
        <a id='gd-user-btn-id' href="#" class="btn">
            <i class="glyphicon glyphicon-user"></i>
            <span th:unless="${session.lang} eq 'en'" sec:authentication="principal.niceName"></span>
            <span th:if="${session.lang} eq 'en'" sec:authentication="principal.username"></span>
        </a>

        <ul class="nav navbar-btn hidden">
            <li>
                <a href="#">
                    <i class="glyphicon glyphicon-king"></i>
                    <span th:text="#{main.user.modify}"></span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="glyphicon glyphicon-phone"></i>
                    <span th:text="#{main.passwd.modify}"></span>
                </a>
            </li>

            <!-- 修改 mainPage.html 中的用户菜单 -->
<!--            <li>-->
<!--                <a href="#" id="modify-password-link"> &lt;!&ndash; 添加ID便于绑定事件 &ndash;&gt;-->
<!--                    <i class="glyphicon glyphicon-lock"></i> &lt;!&ndash; 使用锁图标更合适 &ndash;&gt;-->
<!--                    <span th:text="#{main.passwd.modify}"></span>-->
<!--                </a>-->
<!--            </li>-->

            <li>
                <a th:href="@{/logout}">
                    <i class="glyphicon glyphicon-off"></i>
                    <span th:text="#{main.user.logout}"></span>
                </a>
            </li>
        </ul>
    </nav>
</header>

<ul id="gd-sys-memu-id" class="nav nav-tabs">
    <li th:each="item:${session.menuList}" th:forid="${'service-menu-' + item.menuId}">
        <a href="#">
            <i th:class="${item.menuIcon}"></i>
            <span th:text="${item.menuName}"></span>
        </a>
    </li>
</ul>

<section>
    <nav>
        <ul  class="service-menu nav navbar-btn tab-pane fade" th:each="menu1 :${session.menuList}" th:id="${'service-menu-' + menu1.menuId}">
            <li th:each="menu2:${menu1.child} ">
                <a href="#">
                    <i th:class="${menu2.menuIcon}"></i>
                    <span th:text="${menu2.menuName}"></span>
                </a>
                <ul class="nav navbar-btn menu-level3">
                    <li th:each="menu3:${menu2.child} ">
                        <a th:href="${menu3.getMenuUrl()}" target="contents">
                            <i th:class="${menu3.menuIcon}"></i>
                            <span th:text="${menu3.menuName}"></span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>

    </nav>
    <iframe name="contents" th:src="@{/welcomePage}"></iframe>
</section>
</body>





</html>